<template>
	<Layout>
		<template #title>全部评价</template>
		<ScrollRefresher @refresh="refresh" @tolower="tolower">
			<view class="lawyer-appraise-page">
				<view v-for="item of list " :key="item.id" class="inline-flex fill column user-comment">
					<view class="inline-flex fill user-comment__info">
						<image class="inline-flex user-comment__info__portrait" :src="item.avatar"></image>
						<view class="flex column user-comment__info__other">
							<view>{{item.phoneNumber}}</view>
							<text>{{item.reviewTime}}</text>
						</view>
						<view class="user-comment__info__rate">
							<u-rate inactive-color="#D9D9D9" active-color="#FF710A" :count="5"
								:current="item.overallRating" disabled></u-rate>
						</view>
					</view>
					<view v-if="item.reviewTagList.length>0" class="inline-flex fill user-comment__tags">
						<view v-for="(it,itIndex) of item.reviewTagList" :key="itIndex"
							class="iflex aic jcc user-comment__tag">{{it}}</view>
					</view>

					<view v-if="item.reviewContent" class="inline-flex fill user-comment__content">
						{{item.reviewContent}}
					</view>
				</view>
			</view>
		</ScrollRefresher>
	</Layout>
</template>

<script setup lang="ts" name="LawyerAppraise">
	import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app';
	import { getLawfirmCommentList } from '@/apis/lawfirm';
	import { useGetDataPaging } from '@/hooks/paging';
	import { isEmpty } from '@/utils/util';

	let lawFirmId = '';
	const { list, refresh, tolower } = useGetDataPaging({
		api: getLawfirmCommentList,
		handlerData: (rows) => {
			for (const item of rows) {
				item.reviewTagList = isEmpty(item.reviewTag) ? [] : item.reviewTag.split(',')
			}
		},
		params: () => {
			return { lawFirmId }
		}
	});

	onPullDownRefresh(() => {
		refresh();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 500);
	});

	onLoad((options) => {
		options = options as { lawFirmId : string; }
		lawFirmId = options.lawFirmId;
		refresh();
	});
</script>

<style lang="scss">
	.lawyer-appraise-page {
		padding-top: 30rpx;
	}
</style>